// https://cirosantilli.com/cirodown#insane-link-parsing-rules#overview-of-files-in-this-repository

@use 'sass:math';

@use 'normalize.css/normalize.css';
@use 'katex/dist/katex.min.css';
@use 'tablesort/tablesort.css';
@import 'cirodown.common.scss';

$caption-margin-bottom: 5px;
$header-font-size: 24px;
$p-margin-vert: 14px;
$max-mobile-width: 450px;
$toplevel-horizontal-padding-mobile: 5px;

@mixin hidden {
  display: none;
  // The advantage of this is that when you hover, the height can increase a bit
  // due to | separators which are very tall on certain fonts, and it is not very
  // nice to see the page move.
  //
  // However, with visibility when the screen width is small, it always takes up a newline,
  // to it is even less acceptable.
  //
  // So instead we fix the header height for now.
  //
  // https://github.com/cirosantilli/cirodown/issues/98
  //visibility: hidden;
}

@mixin multiline-caption {
  border-left: 1px solid $color;
  padding-left: 8px;
}

@mixin responsive-img {
  @media only screen and (max-width: $max-mobile-width) {
    height: auto;
    width: 100%;
  }
}

@mixin visible {
  display: inline;
  //visibility: visible;
}

.cirodown {
@include body;

// Helps prevent the horizontal scrollbar on mobile.
word-wrap: break-word;

a {
  &:visited {
    color: $a-color-visited;
  }
}

padding-left: 0;
@media only screen and (max-width: $max-mobile-width) {
  padding-right: $toplevel-horizontal-padding-mobile;
}
@media only screen and (min-width: $max-mobile-width + 1) {
  padding-right: $toplevel-horizontal-padding-right;
}
.caption-prefix {
  font-weight: bold;
}

// Produces the margin on all toplevel elements.
// The on-hover links will show up in that margin.
> * {
  @media only screen and (max-width: $max-mobile-width) {
    padding-left: $toplevel-horizontal-padding-mobile;
  }
  @media only screen and (min-width: $max-mobile-width + 1) {
    padding-left: $toplevel-horizontal-padding-left;
  }
  // Makes the absolute on hover link be absolute relative to this element.
  // This makes it show up inside the padding-left of this element.
  // https://stackoverflow.com/questions/10487292/position-absolute-but-relative-to-parent
  position: relative;
}

// Hide by default, show if first child of hovered element.
.hide-hover:first-child {
  @include hidden;
}
// We remove margins on narrow screens, so there's no space for the link.
@media only screen and (min-width: $max-mobile-width + 1) {
  @media(hover: hover) and (pointer: fine) {
    > :hover > .hide-hover:first-child {
      @include visible;
    }
  }
}
.hide-hover {
  position: absolute;
  left: 0;
}

// Highlight the element referred by the current hash
// so that the user can easily know which one it is.
:target {
  background-color: $target-background-color;
}

blockquote {
  border-left: 2px solid $color;
  margin-left: 0;
  margin-right: 0;
  padding-left: 10px;
}

code {
  background-color: $code-background-color;
}

div.p {
  margin-bottom: $p-margin-vert;
  margin-top: $p-margin-vert;
}

// Figures.
figure {
  margin: $p-margin-vert 0;
  overflow-x: auto;
  &.multiline-caption {
    @include multiline-caption;
  }
  figcaption {
    margin-top: 5px;
  }
}

div.h {
  font-size: $header-font-size;
  font-weight: bold;
  margin: 20px 0 8px;
  width: 100%;
  box-sizing: border-box;
  h1, h2, h3, h4, h5, h6 {
    > a:first-child {
      color: $color;
      &:visited {
        color: $color;
      }
    }
    display: inline;
    margin: 0;
    // To make `word-wrap: break-word;` work, otherwise it does not take effect.
    overflow-wrap: break-word;
  }
  h1 {
    font-size: $header-font-size * 2;
  }
  h2, h3, h4, h5, h6 {
    font-size: $header-font-size;
  }
  .hover-meta {
    @include hidden;
  }
  @media only screen and (min-width: $max-mobile-width + 1) {
    &:hover .hover-meta {
      @include visible;
    }
  }
  // Also show header metadata when the header is selected as the current #fragment.
  &:target .hover-meta {
    @include visible;
  }
}
div.h-nav {
  margin-bottom: $p-margin-vert;
  div.nav {
    font-weight: bold;
		margin-bottom: math.div($p-margin-vert, 2);
    &:before {
      content: "\21b3";
    }
  }
}

// https://cirosantilli.com/cirodown#background-color-of-transparent-images
img {
  background-color: white;
  @include responsive-img;
}

iframe {
  @include responsive-img;
}

// Math.
// https://stackoverflow.com/questions/50896041/katex-font-size/57355836#57355836
.katex { font-size: 1.2em; }
// Make block math larger, otherwise fractions and other tall constructs become tiny.
// Users should avoid tall constructs inline.
.math-container { .katex { font-size: 1.5em; } }
.math-container {
  align-items: center;
  margin-bottom: $p-margin-vert;
  margin-top: $p-margin-vert;
  .math-caption-container {
    margin-bottom: $caption-margin-bottom;
  }
  .math-equation {
    align-items: center;
    display: flex;
    > :nth-child(1) {
      flex-grow: 9;
    }
    > :nth-child(2) {
      flex-grow: 1;
      text-align: right;
    }
  }
}

pre {
  background-color: $code-background-color;
  margin: 8px 0;
  padding: 8px 8px;
  overflow-x: auto;
}

.code {
  &.multiline-caption {
    @include multiline-caption;
  }
}

// Tables
.table {
  margin: $p-margin-vert 0;
  overflow-x: auto;
  &.multiline-caption {
    @include multiline-caption;
  }
  table {
    $table_border: 1px solid $color;
    border: $table_border;
    border-collapse: collapse;
    margin: math.div($p-margin-vert, 2) 0;
    th, td {
      border: $table_border;
      padding: 5px 5px;
    }
  }
  .caption {
    margin-bottom: $caption-margin-bottom;
  }
}

ol, ul {
  padding-left: 30px;
  li {
    // https://github.com/cirosantilli/cirodown/issues/68
    margin-bottom: $p-margin-vert;
    margin-top: $p-margin-vert;
  }
}

// Shows on ToC and on metadata at the end like the ancestor list.
.metrics {
  color: $color-discreet;
}

// Table of contents.
.toc-container {
  overflow-x: auto;

  // On mobile, this would make:
  // - prevent squishing of very to the right elements which:
  //   - makes them more readable
  //   - prevents large useless vertical displacement
  // But it also makes the very first elements of small tocs
  // require horizontal scroll so it doesn't feel like it's worth it :-(
  // What we want is to check is: is the element's absolute position more than 80%
  // to the right of the screen? Then we should just nowrap.
  //white-space: nowrap;

  // Don't wrap lines after level 5 on mobile.
  // Very deep toc items just take up vertical space and are completely unreadable.
  // Work around that on mobile by not wrapping lines after a certain level.
  // Users can still read by horizontal scrolling if they really want to.
  @media only screen and (max-width: $max-mobile-width) {
    li { li { li { li { li { li { li {
      white-space: nowrap;
    } } } } } } }
  }
  ul {
    list-style-type: none;
    li {
      // https://github.com/cirosantilli/cirodown/issues/68
      $toc-sep: 0.3em;
      margin-bottom: $toc-sep;
      margin-top: $toc-sep;
      @media only screen and (min-width: $max-mobile-width + 1) {
        div:hover span.not-arrow span.hover-metadata {
          @include visible;
        }
      }
      div:target span.not-arrow span.hover-metadata {
        @include visible;
      }

      // CSS border triangles.
      // https://css-tricks.com/snippets/css/css-triangle/
      $arrow-color: #009900;
      $arrow-width: 0.7em;
      @mixin arrow {
        color: blue;
        display: inline;
        > * {
          display: inline-block;
          height: 0;
          margin-right: 0.6 * $arrow-width;
          vertical-align: middle;
          width: 0;
        }
      }
      @mixin hover-highlight-arrow {
        @media only screen and (min-width: $max-mobile-width + 1) {
          &:hover {
            background-color: $target-background-color;
          }
          &:hover > * {
            background-color: $target-background-color;
          }
        }
      }
      div {
        display: flex;
        span.not-arrow {
          span.hover-metadata {
            @include hidden;
          }
        }
        // Take up space on LIs that don't have an arrow.
        &.arrow {
          @include arrow;
          & > * {
            border-left: $arrow-width solid transparent;
            border-right: $arrow-width solid transparent;
            border-top: $arrow-width solid transparent;
          }
        }
      }
      // Right arrow for open LIs.
      &.has-child > div > div.arrow {
        @include arrow;
        @include hover-highlight-arrow;
        & > * {
          border-left: $arrow-width solid transparent;
          border-right: $arrow-width solid transparent;
          border-top: $arrow-width solid $arrow-color;
        }
      }
      &.close {
        ul {
          display: none;
        }
        // Down arrow for closed LIs.
        &.has-child > div > div.arrow {
          @include arrow;
          @include hover-highlight-arrow;
          & > * {
            border-top: $arrow-width solid transparent;
            border-bottom: $arrow-width solid transparent;
            border-left: $arrow-width solid $arrow-color;
          }
        }
      }
    }
  }
  > ul {
    padding-left: 0px;
    > li > ul {
      padding-left: 0px;
      * {
        // Ignore special background on code blocks.
        // TODO this was enabled at one point not sure why, seems to be at
        // f8fc9eacfa794b95c1d9982a04b62603e6d0bb83
        //background-color: $background-color;
      }
    }
  }
  .title {
    font-size: $header-font-size;
    font-weight: bold;
  }
  @media only screen and (max-width: $max-mobile-width) {
    .metrics-sep {
      display: none;
    }
  }

  // Override the default URL fragment behaviour, only color the toc title when the ToC
  // is targeted, otherwise it is too annoying. Especially because the first thing
  // you want to do on a ToC is to click that nice big link. And then the entire ToC becomes
  // red and unreadable (especially due to link colors) and then it requires some thinking to how
  // to make it stop being red (remove #fragment from URL manually or find another ID on page).
  // So we just take the solution that prevents the user from shooting themselves.
  background-color: $background-color;
  div:target {
    background-color: $target-background-color;
  }
  div:target * {
    background-color: $target-background-color;
  }
  &:target div.title-div {
    background-color: $target-background-color;
  }
}

sup.ref {
  // https://stackoverflow.com/questions/6900124/how-to-make-certain-text-not-selectable-with-css
  user-select: none;
}

// Overrides for the tablesort.css
// https://raw.githubusercontent.com/tristen/tablesort/5.2.1/tablesort.css
th[role=columnheader]:not(.no-sort):after {
  border-color: $color transparent;
}

video {
  @include responsive-img;
}
}
